<template>
	<view v-if="show">
		<view class="cu-list menu-avatar comment radius-xl">
			<template v-if="list.length > 0">
				<view class="cu-item" v-for="(item, index) in list" :key="index">
					<view class="cu-avatar round" :style="{ backgroundImage: 'url(' + item.headimg + ')' }"></view>
					<view class="content">
						<view class="nickNameandTime">
							<view class="nickBox">
								<view class="text-black nickName">{{ item.nickname }}</view>
								<view class="text-sm score">
									<text class="cuIcon-favorfill text-orange padding-left-mn"
										v-for="(it, indexs) in item.grade" :key="indexs"></text>
								</view>
							</view>

							<view class="text-gray text-df">{{ item.create_time }}</view>
						</view>
						<view class="text-gray text-content text-df">
							{{ item.content }}
						</view>
						<view class="tag flex flex-wrap padding-top-sm">
							<view v-for="(item, index) in item.tags" :key="index" class="padding-right-xs">
								<view class='cu-tag radius'>
									{{ item }}
								</view>
							</view>
						</view>
						<view class="bg-grey padding-xs radius margin-top-xs  text-sm light" v-if="item.reply">
							<view class="flex">
								<view>门店回复：</view>
								<view class="flex-sub">{{ item.reply }}</view>
							</view>
						</view>
					</view>
				</view>
			</template>
			<view class="flex flex-direction justify-center" v-else>
				<emptyData type="notLog" text="暂无评论"></emptyData>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	props: {
		list: {
			type: [Array, Object],
			default: () => [],
		},
		show: {
			type: Boolean,
			default: false,
		}
	},
	data() {
		return {

		};
	}
}
</script>

<style lang="less" scoped>
.comment {
	.content {
		.nickNameandTime {
			display: flex;
			justify-content: space-between;

			.nickBox {
				display: flex;
				justify-content: flex-start;
				// .nickName{
				// 	display: inline-block;
				// }
				// .score{
				// 	display: inline-block;
				// }
			}
		}
	}
}
</style>
